import React from "react"
import  './SearchDetail.scss'
import { useHistory} from "react-router-dom"
import useStore from "../context/useStore";
import {useObserver} from "mobx-react-lite"
const SearchDetail: React.FC = () => {
  let { search } = useStore()
    let history = useHistory()
    //返回上一页
    function back() {
      history.goBack()
    }
  function goxx(e: React.MouseEvent) {
      if (e.target !== e.currentTarget) {
        let item =JSON.parse( (e.target as HTMLElement).dataset.item)
          history.push({
            pathname: "/articleDetail",
              state: {
                ...item
              }
          })
        }
  }
  function tiao(e) {
    if (e.target !== e.currentTarget) {
      let id=e.target.dataset.id
      history.push({
        pathname: "/mydetail",
        state: {
          id:id
        }
      })
    }
  }
  return useObserver(() =>
    <div className='SearchDetail'>
        <div className="heads">
          <span onClick={back}><svg  className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1864" width="20" height="20"><path d="M294.13376 512c0-13.70112 5.23264-27.40224 15.6672-37.84704l328.704-328.69376c20.91008-20.91008 54.80448-20.91008 75.70432 0 20.89984 20.89984 20.89984 54.79424 0 75.70432L423.36256 512l290.83648 290.83648c20.89984 20.89984 20.89984 54.80448 0 75.70432-20.89984 20.91008-54.79424 20.91008-75.70432 0l-328.704-328.69376C299.35616 539.40224 294.13376 525.70112 294.13376 512z" p-id="1865"></path></svg></span>
          <h3>搜索结果</h3>
      </div>
        {/* 搜索框 */}
        <div className="search_sou">
        <div className="search_ipt">
          <input type="text"  placeholder="搜索"/>
        </div>

      </div>
        {/* 搜索结果 */}

      <section className='result'>
      
        <h4>排名</h4>
        <div className="result_nav"  onClick={tiao}>
          {
            search.searchRankList.map(item => {
              return (
                      <li key={item.id} data-id={item.id}>
                        <img src={item.image} alt=""  data-id={item.id}/>
                        <p  data-id={item.id}>{item.name}</p>
                      </li>   
              )
            })
          }
        </div>
      
      </section>
      <section className="result_con" >
        <h4>内容</h4>
        <div className="result_con_nn">
        {
            search.searchArticleList.map((item, index) => {
            return (
              <section key={index} className="res_c_n" onClick={goxx}>
                            
                 <div> <img src={item.image} alt=""  data-item={JSON.stringify(item)}/></div>
                 <p  data-item={JSON.stringify(item)}>{item.title}</p>
                <div className="res_c_n_n">
                  <div>
                    <div> <img src={item.avatar} alt="" /></div>
                    <span>{item.nickname}</span>
                  </div>
                  <span>推荐值{item.score}</span>
                </div>
              </section>
            )
          })
        }
        </div>
      </section>
    </div>
    )
}
export default SearchDetail 